<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>主要对手</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		  content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
	<script src="../../res/js/jquery-3.4.1.min.js" type="text/javascript"
			charset="utf-8"></script>
</head>
<body>
<script type="text/html" id="toolbarDemo">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input  type="text" id="keywordOne" value="" placeholder="输入对手名字"
                        class="layui-input " style="width: 120px;height: 32px;">
            </div>
            <button id="select" class="layui-btn layui-btn-sm" lay-event="findResult">查询</button>
            <button id="selectAll" class="layui-btn layui-btn-sm" lay-event="queryAll">查看所有</button>
            <a class="layui-btn layui-btn-normal newsAdd_btn layui-btn-sm" onclick="add()">添数据</a>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm"  lay-event="getCheckData" >批量删除</button>
        </div>
</script>

<div style="margin-top: 10px;">
	<table id="demo" lay-filter="test" ></table>
</div>
<script type="text/html" id="toolbarDemoTwo">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input id="keywordTwo" type="text" value="" placeholder="输入比赛名称"
                       class="layui-input search_input" style="width: 120px;height: 32px;">
            </div>
            <button id="select2" class="layui-btn layui-btn-sm" lay-event="findResultTwo">查询</button>
            <button id="selectAll2" class="layui-btn layui-btn-sm" lay-event="queryAll2">查看所有</button>
            <a class="layui-btn layui-btn-normal newsAdd_btn layui-btn-sm" onclick="addTwo()">添数据</a>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="getCheckDataTwo">批量删除</button>
            <input id="resultId" type="hidden" value="" placeholder=""
                   class="layui-input search_input" style="width: 120px;height: 32px;">
        </div>
        </div>
</script>

<div style="margin-top: 10px;">
	<table id="demoOne" lay-filter="test1"></table>
</div>
<script src="../../res/layui/layui.js"></script>
<script>
	layui.use('form', function() {
		form = layui.form;
	});
	var table1 = null;
    var table2 = null;
	layui.use('table',function() {
		table = layui.table;
		//第一个实例  出现原始表格
		table1 = table.render({
			elem : '#demo',
			height : 400,
			url : '../../../atsRival/findAll', //数据接口
			id : 'testReload',
            toolbar: '#toolbarDemo',
			page : true, //开启分页
			cols : [ [ //表头
                {type: 'checkbox',
                    fixed: 'left',
                    field:'rivId'
                }
                , {
					field : 'rivName',
					title : '对手名称',
					width : 180,
					sort : true,
					fixed : 'left'
				},
				{
					field : 'rivSex',
					title : '性别',
					width : 80
				},
				{
					field : 'rivFailing',
					title : '对手缺点',
					width : 190,
				},
				{
					field : 'rivTechnique',
					title : '技术风格',
					width : 190,
					sort : true
				},
				{
					field : 'rivTactics',
					title : '战术风格',
					width : 190,
				},{
					fixed : 'right',
					width : 190,
					title : '操作',
					align : 'center',
					toolbar : '#barDemo'
				} ] ]
		});
		//监听行工具事件 // 删除但没有从数据库里 删除
		table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data //获得当前行数据
					, layEvent = obj.event; //获得 lay-event 对应的值
			if (layEvent === 'del') {
				layer.confirm('真的删除行么', function(index) {
					// layer.msg(data.pxID);//得到id
					var url = "../../../atsRival/updateDelete";
					var dataone = {
						"rivId" : data.rivId
					};
					$.get(url, dataone, function(one) {
						if (one.num == 1) {
							layer.msg(one.msg, {
								icon : 1,
								time : 1000
							}, function() {
								layer.close(index);//关闭层
								//parent.location.reload();//刷新主界面
								window.location.reload();
							});
						} else {
							layer.msg(one.msg);
						}
					}, "json");
					//obj.del(); //删除对应行（tr）的DOM结构
					//向服务端发送删除指令
				});
			}else if (layEvent === 'edit') {
				layer.open({
					type : 2,
					title : '修改页面',
					shadeClose : true,
					skin : 'layui-layer-molv', // 样式类名
					shade : 0.6,
					area : [ '800px', '500px' ],
					//offset: '90px',// 好比margin-top
					content : 'addRival.html?rivId='+data.rivId+'',//iframe的url

				});
			} else if(layEvent ==='examine'){
                table2.reload({
                    url: '../../../atsRivalResult/findAll',

                    where: {
                        rivId : data.rivId
                    },
                    page: {curr: 1}
                });
                $("#resultId").val(data.rivId);
			}
		});
		<!--头部工具栏-->
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                //批量删除
                case 'getCheckData':
                        var data = checkStatus.data;
                        var ids = "";
                        $.each(data,function (i,item) {
                            ids += item.rivId+",";
                        })
                        if(ids!="" && ids!=null){
                            layer.confirm('您真的要删除吗', function (index) {
                                var url = "../../../atsRival/batchDelete";
                                var datas = {
                                    "ids" : ids
                                };
                                $.post(url,datas,function (obj) {
                                    layer.msg(obj.msg);
                                    table1.reload();//刷新表格
                                    table2.reload();//刷新表格
                                },"json");
                            });
                        }else{
                            layer.alert("请选择要删除的数据");
                        }
                    break;
                //根据内容模糊查询
                case 'findResult':
                    var name = $("#keywordOne").val();
                    table1.reload({
                        url: '../../../atsRival/findAll',
                        where: {
                            rivName: name,
                        },
                        page: {curr: 1}
                    });
                    $("#name").val(name);
                    $("#keywordOne").attr("value",name)
                    break;
                //查看所有
                case'queryAll':
                    table1.reload({
                        url: '../../../atsRival/findAll',
                        where: {
                            rivName: "",
                        },
                        page: {curr: 1}
                    });
                    break;
            };
        });
	});
	//对手比赛成绩
    layui.use('table',function() {
        table = layui.table;
        //第一个实例  出现原始表格
        table2 = table.render({
            elem : '#demoOne',
            height : 500,
            url : '../../../atsRivalResult/findAll', //数据接口
            toolbar : '#toolbarDemoTwo',
            id : 'testReloadTwo',
            page : true, //开启分页
            cols : [ [ //表头
                {type: 'checkbox', fixed: 'left',field:'resultId',
                },
                {
                    field : 'matchName',
                    title : '比赛名称',
                    width : 160,
                },
                {
                    field : 'matchTime',
                    title : '比赛时间',
                    width : 190,
                },
                {
                    field : 'matchAddr',
                    title : '比赛地点',
                    width : 160,
                },
                {
                    field : 'matchItem',
                    title : '比赛项目',
                    width : 160,
                },
                {
                    field : 'matchResult',
                    title : '比赛成绩',
                    width : 160,
                    sort : true
                },
                {
                    field : 'matchSort',
                    title : '比赛排名',
                    width : 100,
                },{
                    field : 'score',
                    title : '积分',
                    width : 100,
                },{
                    field : 'rivName',
                    title : '对手姓名',
                    width : 150,
                },{
                    fixed : 'right',
                    width : 190,
                    title : '操作',
                    align : 'center',
                    toolbar : '#barDemoTwo'
                } ] ]
        });
        //监听行工具事件 // 删除但没有从数据库里 删除
        table.on('tool(test1)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del2') {
                layer.confirm('真的删除行么', function(index) {
                    // layer.msg(data.pxID);//得到id
                    var url = "../../../atsRivalResult/updateDelete";
                    var dataone = {
                        "resultId" : data.resultId
                    };
                    $.get(url, dataone, function(one) {
                        if (one.num == 1) {
                            layer.msg(one.msg, {
                                icon : 1,
                                time : 1000
                            }, function() {
                                layer.close(index);//关闭层
                                //parent.location.reload();//刷新主界面
                                window.location.reload();
                            });
                        } else {
                            layer.msg(one.msg);
                        }
                    }, "json");
                    //obj.del(); //删除对应行（tr）的DOM结构
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit2') {
                layer.open({
                    type : 2,
                    title : '修改页面',
                    shadeClose : true,
                    skin : 'layui-layer-molv', // 样式类名
                    shade : 0.6,
                    area : [ '800px', '500px' ],
                    //offset: '90px',// 好比margin-top
                    content : 'addRivalResult.html?resultId='+data.resultId+'',//iframe的url
                });
            }
        });
        <!--头部工具栏-->
        table.on('toolbar(test1)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                //批量删除
                case 'getCheckDataTwo':
                        var data = checkStatus.data;
                        var ids = "";
                        $.each(data,function (i,item) {
                            ids += item.resultId+",";
                        })
                        if(ids!="" && ids!=null){
                            layer.confirm('您真的要删除吗', function (index) {
                                var url = "../../../atsRivalResult/batchDelete";
                                var datas = {
                                    "ids" : ids
                                };
                                $.post(url,datas,function (obj) {
                                    layer.msg(obj.msg);
                                    table1.reload();//刷新表格
                                    table2.reload();//刷新表格
                                },"json");
                            });
                        }else{
                            layer.alert("请选择要删除的数据");
                        }
                    break;
                //根据内容模糊查询
                case 'findResultTwo':
                    var name = $("#keywordTwo").val();

                    table2.reload({
                        url: '../../../atsRivalResult/findAll',
                        where: {
                            matchName: name,
                            rivId:""
                        },
                        page: {curr: 1}

                    });
                    $("#name").val(name);
                    $("#keywordTwo").attr("value",name)
                    break;
                case 'queryAll2':
                    table2.reload({
                        url: '../../../atsRivalResult/findAll',
                        where: {
                            matchName: "",
                            rivId:""
                        },
                        page: {curr: 1}
                    });
                    break;
            };
        });
    });
</script>

<!--操作按钮-->
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑 </a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="examine">查看</a>
</script>

<script type="text/html" id="barDemoTwo">
    <a class="layui-btn layui-btn-xs" lay-event="edit2">编辑 </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del2">删除</a>
</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript">
	function add() {
		//弹出层
		layer
				.open({
					type : 2,
					title : '添加页面',
					shadeClose : true,
					skin : 'layui-layer-molv', // 样式类名
					shade : 0.6,
					area : [ '800px', '500px' ],
					//offset: '90px',// 好比margin-top
					content : 'addRival.html?rid=', //iframe的url

				});
	}
    function addTwo() {
        //弹出层
        layer
            .open({
                type : 2,
                title : '添加页面',
                shadeClose : true,
                skin : 'layui-layer-molv', // 样式类名
                shade : 0.6,
                area : [ '900px', '600px' ],
                //offset: '90px',// 好比margin-top
                content : 'addRivalResult.html?rivId='+$("#resultId").val(), //iframe的url
            });
    }
	//得到地址栏上的参数  可以 是中文
	function getQueryStringOne(key) {
		var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if (r != null)
			return decodeURI(r[2]);
		return null;
	}
</script>
</body>
</html>